<template>
  <div class="m-steps">
    <div
      v-for="(item, id) of data"
      :key="item.index || id"
      class="m-steps-item"
    >
      <div class="item-icon">
        <span :class="{ 'icon-complete': (item.index || id) <= value }">
          <i
            v-if="(item.index || id) < value"
            class="iconfont-new icon-check-line1"
          />
          <ins v-else>{{ item.index || id }}</ins>
        </span>
      </div>
      <span :class="textClass(item.index || id)">{{ item.label }}</span>
      <span class="hair-line"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MSteps',
  props: {
    value: {
      type: Number,
    },
    data: {
      type: Array,
      required: true,
    },
  },
  computed: {
    textClass() {
      return (index) => {
        return {
          'item-text': index > this.value,
          'active-text': index === this.value,
          'blod-text': index < this.value,
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
.m-steps {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  background-color: #fff;
  box-shadow: inset 0px 1px 0px 0px rgba(245, 245, 245, 1);
  &-item {
    flex: 1;
    position: relative;
    .item-icon {
      display: inline-block;
      width: 32px;
      height: 32px;
      padding-top: 3px;
      background-color: #fff;
      position: relative;
      z-index: 3;
      span {
        display: inline-flex;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        color: #2d71ee;
        background-color: rgba(45, 113, 238, 0.1);
        align-items: center;
        justify-content: center;
        &.icon-complete {
          background-color: rgba(45, 113, 238, 1);
          color: #fff;
        }
        ins {
          font-weight: bold;
          text-decoration: unset;
          font-family: system-ui, sans-serif;
        }
        i {
          font-weight: bold;
        }
      }
    }
    .item-text,
    .blod-text,
    .active-text {
      display: block;
      color: #666;
      padding-top: 4px;
    }
    .blod-text {
      color: #333;
      font-weight: bold;
    }
    .active-text {
      color: #2d71ee;
      font-weight: bold;
    }
    .hair-line {
      left: 65px;
      width: 100%;
      top: 15px;
      height: 0px;
      border-top: dashed 1px #2d71ee;
      position: absolute;
      z-index: 1;
    }
    &:last-child {
      .hair-line {
        width: 0;
      }
    }
  }
}
</style>
